let table, form;
layui.use(['table', 'form'], function(){
    table = layui.table;
    form = layui.form;
    // 已知数据渲染
    var myTable = table.render({
        elem: '#ID-table-demo-data'
        ,id: 'test' // 定义表格唯一标识符
        ,cols: [[ //标题栏
            {title: '序号', type:'numbers', width: 80}
            ,{field: 'username', title: '用户名'}
            ,{field: 'name', title: '真实姓名'}
            ,{field: 'email', title: '邮箱', minWidth: 160}
            ,{field: 'phone', title: '手机', minWidth: 160}
            ,{field: 'gender', title: '性别', templet: function(d){
                return d.gender? '<span style="color: blue">♂</span>':'<span style="color: pink">♀</span>';
            }}
            ,{field: 'birthday', title: '生日', templet: function(d){
                    return d.birthday? d.birthday.substring(0, d.birthday.indexOf("T")): '未知';
            }}
            ,{field: 'qq', title: 'QQ', width: 80}
            ,{field: 'state', title: '状态', templet: function(d){
                if (d.state == 1){
                    return '<button type="button" class="layui-btn layui-btn-xs">正常</button>'
                } else{
                    return '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger">禁用</button>'
                }
            }}
            ,{title: '操作', width: 80, fixed: 'right', toolbar: '#barDemo'}
        ]]
        ,url: ctx + '/user/list' // 数据接口
        ,parseData: function(res){ // res 即为原始返回的数据
            return {
                "code": res.list? 0: -1, // 解析接口状态
                "msg": res.list? '成功': '失败', // 解析提示文本
                "count": res.total, // 解析数据长度
                "data": res.list // 解析数据列表
            };
        }
        //,skin: 'line' // 表格风格
        //,even: true
        ,page: true // 是否显示分页
        ,limits: [5, 10, 15]
        ,limit: 5 // 每页默认显示的数量
    });

    table.on('tool(test)', function(obj){
        var data = obj.data; // 得到当前行数据

        if (obj.event == 'edit'){
            console.log("编辑" + data.id);
            // 打开编辑页面
            layer.open({
                type: 2,
                title: '编辑用户',
                content: ctx + '/user/edit/' + data.id,
                area: ['500px', '450px'],
                maxmin: true
            });
        } else if (obj.event == 'del'){
            layer.confirm('真的删除行 [id: '+ data.id +'] 么', {icon:3, title: '提示'}, function(index){
                console.log("删除" + data.id);
                // 发送异步请求删除数据
                // 删除成功后，刷新表格
                // obj.del();
                table.reloadData('test');
                // table.reload('test');
                layer.close(index);
                // 向服务端发送删除指令
            });
        }
    });

    // 搜索提交
    form.on('submit(demo-table-search)', function(data){
        let field = data.field; // 获得表单字段

        for (let key in field){
            if (!field[key]){
                // 字段没有值，则删除该字段
                delete field[key];
            }
        }
        // 执行搜索重载
        table.reload('test', {
            page: {
                curr: 1 // 重新从第 1 页开始
            }
            ,where: field // 搜索的字段
        });
        return false; // 阻止默认 form 跳转
    });


});


document.querySelector('#add').onclick = function() {
    // 打开编辑页面
    layer.open({
        type: 2,
        title: '添加用户',
        content: ctx + '/user/add/',
        area: ['500px', '450px'],
        maxmin: true
    });
}